<!-- 解决方案页面 -->
<template>
  <div class="SolveScheme">
    <!-- <Head /> -->
    <div class="main">
      <!-- 标题文字 -->
      <div class="main_up">
        <h3>Case</h3>
        <p>案例</p>
      </div>
      <!-- 底下的图 -->
      <div class="main_down">
        <div class="main_downW">
          <CaseCard
            v-for="(item, index) in card"
            :key="index"
            :title="item.title"
            :titleY="item.titleY"
            :image="item.image"
            :paragraph="item.paragraph"
            class="caseKa"
          />
        </div>
        <!-- 点击 -->
        <div class="dj"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from '../components/Head';
import CaseCard from '../Case/CaseCard';
export default {
  components: { Head, CaseCard },
  data() {
    return {
      card: [
        {
          title: '智慧景区',
          titleY: 'Wisdom scenic spot',
          image: require('./img/02bf.png'),
          paragraph:
            ' 显示所有监控设备实时画面，并根据重点区域可自定义监控顺序，支持人体/人脸记录结构化属性，并根据重点区域可'
        },
        {
          title: '智慧楼宇',
          titleY: 'Wisdom scenic spot',
          image: require('./img/02bf.png'),
          paragraph:
            ' 显示所有监控设备实时画面，并根据重点区域可自定义监控顺序，支持人体/人脸记录结构化属性，并根据重点区域可'
        },
        {
          title: '智慧园区',
          titleY: 'Wisdom scenic spot',
          image: require('./img/02bf.png'),
          paragraph:
            ' 显示所有监控设备实时画面，并根据重点区域可自定义监控顺序，支持人体/人脸记录结构化属性，并根据重点区域可'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {}
};
</script>
<style lang="less" scoped>
.SolveScheme {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
  // 大盒子
  .main {
    padding-top: 16vh;
    width: 100vw;
    height: 100vh;
    position: relative;
    background: url('./img/06dbj.jpg') no-repeat center;
    background-size: 100% 100%;
  }
  // 标题文字
  .main_up {
    h3 {
      margin-left: 10.5vw;
      font-size: 0.58rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
    p {
      margin-left: 10.5vw;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
  // 卡片
  .main_down {
    .main_downW {
      margin: 0.5rem auto 0;
      width: 80vw;
      display: flex;
      justify-content: space-between;
      .caseKa {
        margin: 0 1.1rem 0rem 0;
      }
    }
  }
  //点击
  .dj {
    margin: 0.7rem auto 0;
    color: #ffffff;
    font-size: 0.28rem;
    font-weight: bold;
    width: 1.45rem;
    height: 0.43rem;
    background: url('./img/05anniu.png') no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
